<%--
  Created by IntelliJ IDEA.
  User: 高朋
  Date: 2020/11/10
  Time: 21:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统登录界面</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>添加图书</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: url("imag/67.jpg");
            background-size: cover;
        }
        .bg{
            width: 900px;
            height: 500px;
            border: 1px solid #EEEEEE;
            /*水平居中*/
            margin: auto;
            margin-top: 90px;
        }
        .rg-left{
            /*
                        border: 1px solid red;
            */
            float: left;
        }
        .rg-center{
            /*border: 1px solid red;*/
            float: left;
            margin-left:130px;
        }
        .rg-right{
            /*border: 1px solid red;*/
            float: right;
        }
        #cn{
            color: yellow;
            font-size: 20px;
            margin: 15px;
        }
        #en{
            color: gray;
            font-size: 20px;
        }
        .rg-right p{
            font-size: 15px;
            margin: 15px;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #bookNo, #bookName, #press, #author, #pubTime, #location, #price{
            width: 251px;
            height: 32px;
            border:1px solid #a6a6a6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #button{
            width: 150px;
            height: 40px;
            background-color: green;
        }
        #radio_n{
            margin-left: 80px;
        }
        input{
            background-color: transparent;
        }

    </style>
</head>
<body >
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<div class="bg">
    <div class="rg-left">
        <p id="cn">添加图书</p>
        <p id="en">Add Books</p>
    </div>
    <div class="rg-center">
        <div class="form">
            <form action="${pageContext.request.contextPath}/user.do" method="post">
                <input name="method" value="add"type="hidden">
                <table  align="center" width="500">
                    <tr>

                        <td class="td_left"><label for="bookNo">书籍编号</label></td>
                        <td class="td_right"><input type="text" name="bookNo" id="bookNo" placeholder="xxx-x-xx-xxxxx-x">
                        <span id="bookNo_span"></span> </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="bookName">书籍名称</label></td>
                        <td class="td_right"><input type="text" name="bookName" id="bookName" placeholder="请输入书籍名称"> </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="press">出版社</label></td>
                        <td class="td_right"><input type="text" name="press" id="press" placeholder="请输入出版社"> </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="author">作者</label></td>
                        <td class="td_right"><input type="text" name="author" id="author" placeholder="请输入姓名"> </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>是否借出</label></td>
                        <td class="td_right"><input type="radio" name="isBorrowed" value="yes">是
                            <input type="radio" name="isBorrowed" value="no" id="radio_n" checked="checked">否</td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="pubTime">出版日期</label></td>
                        <td class="td_right"><input type="date" name="pubTime" id="pubTime" placeholder="请输入出版日期"> </td>
                    </tr>
                    <td class="td_left"><label for="location">存放位置</label></td>
                    <td class="td_right"><input type="text" name="location" id="location" placeholder="#/区/#架/#层"> </td>
                    <tr>
                    <tr>
                        <td class="td_left"><label for="price">价格</label></td>
                        <td class="td_right"><input type="text" name="price" id="price" placeholder="请输入价格"> </td>
                    </tr>

                    <td colspan="2" align="center"><input type="submit" value="添加"  id="button"></td>
                    </tr>
                </table>
            </form>
        </div>

    </div>
    <div class="rg-right">
        <p>图书存在?<a href="${pageContext.request.contextPath}/mainFrame.jsp">立即返回</a> </p>

    </div>
</div>

<script>
    //给书本编号绑定鼠标焦点离开事件
    $("#bookNo").blur(function (){
        //获取文本框的值
        let bookNo=$(this).val();
        //发送ajax请求
        //服务器期望的返回类型是：{"bookNoExist":true}
        $.post("ajaxServlet",{bookNo:bookNo},function (data){
            //获取预留在书籍编号后面的span
            let span=$("#bookNo_span");
            if(data.bookNoExist)
            {
                //书籍已经存在
                span.css("color","red");
                span.html("书籍已存在");
            }else
            {
                //书籍不存在
                span.html("<img src=\"imag/duigou.png\">");
            }
        },"json");
    });
</script>
</body>
</html>
